<template>
  <div class="newslist_body">
    <Home_header :settings="config.setting"  :showtop="false"></Home_header>
    <div class="local_nav">
      <p>
        <span>当前位置： <nuxt-link to="/">网站首页</nuxt-link>&gt;
          <template v-if="query.anchor">
          <nuxt-link  :to="{path:'newslist',query:listquery}">{{query.anchor}}</nuxt-link>&gt;
          </template>
          <a href="javascript:void(0)">正文</a></span>
      </p>
    </div>
    <div class="article_huazhang main">
      <div v-if="newsDetail_content.data.title" style="background: #fff" class="main_newslist_content">
        <h1 class="content_m">{{newsDetail_content.data.title}}</h1>
        <div class="detail_time">时间：{{newsDetail_content.data.created_at}}</div>
        <template v-if="newsDetail_content.data.content">
        <div v-html="newsDetail_content.data.content"></div>
        </template>
        <template v-else-if="newsDetail_content.data.description">
          <div v-html="newsDetail_content.data.description"></div>
        </template>
      </div>
         <div v-else-if="newsDetail_content.data.name" style="background: #fff" class="main_newslist_content">
           <h1>{{newsDetail_content.data.name}}</h1>
           <div class="detail_time">{{newsDetail_content.data.created_at}}</div>
           <template v-if="newsDetail_content.data.content">
             <div class="cotnews" v-html="newsDetail_content.data.content"></div>
           </template>
           <template v-else-if="newsDetail_content.data.description">
             <div class="cotnews" v-html="newsDetail_content.data.description"></div>
           </template>
        </div>
      <rightnav></rightnav>
    </div>
  </div>
</template>

<script>
    import Home_header from '../../components/Home-header'
    import rightnav from '../../components/right_nav.vue'

    export default {
        name: 'newsdetail',
        async  asyncData({app,query}) {
          console.log('测试测试1',query)
            console.log('id3',query)
            let config = await app.$apiconfig();
            let newsDetail_content;
            if(query.keywords){
                 newsDetail_content = await app.$apiGet('articledetail',{
                    id:query.id
                })
            }else {
                 newsDetail_content = await app.$apiGet(query.detailpath,{
                    id:query.id
                })
            }

            let listquery=Object.assign(query,{});
            delete  listquery.id;
            console.log( "ceshi2",listquery);
            return {
                query,
                listquery,
                config: config,
                newsDetail_content,
            }
        },
        watch: {
            "$route": function(){
                window.location.reload();
            }
        },
        head() {
            return this.config.header;
        },
        components: {
            Home_header,
            rightnav,
        },
        created() {
          debugger
            console.log("newsDetails"+this.newsDetail_content)
        }

    }
</script>

<style>
.content_m {
  color:#000;
  font-size: 25px;
  text-align: center;
  font-weight: 500;
}
.detail_time {
  font-size: 16px;
  margin-top:20px;
  margin-bottom: 20px;
  text-align: center;
}
@media (max-width:1250px) {
   .main {
     width: 90%;
   }
   .sec_z {
     width:90%;
     margin-left:5%;
   }
   .sec_z-s-wrap {
     width:100%;
   }
   .txts-list-title {
     width:100%;
   }
   .local_nav {
     width:90%;
     margin: auto;
   }
   .main_newslist_content {
     width: 60%;
   }
   .right_navbox {
     width:35%;
   }
   .right_rig {
     width:100%;
   }
 }
  @media (max-width:850px) {
    .main_newslist_content img{
      max-width: 100%!important;
      height: auto!important;
    }
    .right_navbox {
      width: 100%;
      order: 1;
    }
    .main_newslist_content {
      width:100%;
    }

    .local_nav {
      font-size:14px;
      margin-top: 10px;
      margin-bottom: 10px;
    }
    .main {
      flex-direction: column;
    }
     .right_rig {
      width:100%!important;
    }
  }
</style>
